<template>
  <div>
    <div>
      <p class="breadcrumb">全部<i class="el-icon-arrow-right"></i><router-link :to="{ name: 'systemMsg' }" class="bread">系统消息</router-link><i class="el-icon-arrow-right"></i>消息详情</p>
      <div class="msgtitle">{{title}}<span>{{time}}</span></div>
      <p class="msgcontent">{{content}}</p>
    </div>
  </div>
</template>
<script>
  import {updateMes, systemMes} from '@/service/get-data'
  // import {Tabs, TabPane, Collapse, CollapseItem, Row, Pagination, Select, Option} from 'element-ui'
  // import {tab} from '@/components/index'
  export default{
    components: {},
    data () {
      return {
        id: '',
        title: '',
        time: '',
        content: ''
      }
    },
    methods: {
      async fetchRead () {
        let res = await updateMes(this.id)
        if (res.data.resultCode && res.data.resultCode === 2000) {
          res = res.data
          this.title = res.data.title
          this.time = res.data.sendTime
          this.content = res.data.content
          this.fetchSystemList() // 更新已读消息数量
          // this.$store.commit('MESSAGENUM', res.data.messageNumber)
        }
      },
      // 获取未读消息数量
      async fetchSystemList () {
        let res = await systemMes(1, 10, false)
        res = res.data
        if (res.resultCode && res.resultCode === 2000) {
          this.$store.commit('MESSAGENUM', res.data.page.totalRecords)
        } else {
          this.$message({
            message: res.resultMsg,
            type: 'wraming'
          })
        }
      }
    },
    mounted () {
      let routequery = this.$route.query
      this.id = routequery.id
      this.fetchRead()
    }
  }
</script>
<style lang="scss" scoped>
  .msgtitle{
    font-size: 18px;
    overflow: hidden;
    margin-top: 40px;
    span{
      font-size: 14px;
      float: right;
      color: #999999;
    }
  }
  .msgcontent{
    font-size: 14px;
    color: #666666;
    margin-top: 16px;
    line-height: 2;
    img{
      width: 100%;
    }
  }
</style>

